<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html style="height:100%;">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>实时日志监控</title>
</head>
<body style="height: 100%; margin: 0px;">
	<div align="center" style="height: 100%; width: 100%;">
		<div style="padding-top: 20px; padding-bottom: 10px;">
			<label>级别：<select id="level">
					<option value="ALL">全部</option>
					<option value="INFO">信息</option>
					<option value="WARN">警告</option>
					<option value="DEBUG">调试</option>
					<option value="ERROR">错误</option>
			</select></label> <label>类名：<input id="cls"></input></label> <label>方法名：<input id="method"></input></label> <label>包含：<input id="content"></input></label>
			<button onclick="filter();">过滤</button>
			<button id="cls" onclick="cls();">清空</button>
			<button id="stp" onclick="stop();">开始</button>
		</div>
		<textarea spellcheck="false" id="log" style="height: calc(100% - 80px); resize: none; width: calc(100% - 20px); margin: 10px 10px 10px 10px"></textarea>
	</div>

</body>
<script type="text/javascript">
	var myajax = {

		post : function(params) {
			var xmlhttp = this.createXMLHttpRequest();
			if (xmlhttp != null) {
				var async = true;
				if (typeof params.async != "undefined")
					async = params.async;
				var data = null;
				if (typeof params.data != "undefined")
					data = params.data;
				var url = "";
				if (typeof params.url != "undefined")
					url = params.url;
				if (url == null || url.length == 0)
					return;
				xmlhttp.open("POST", url, async);
				if (async) {
					xmlhttp.onreadystatechange = function() {

						if (this.readyState == 4) {
							if (this.status == 200) {

								if (typeof params.success != "undefined") {
									params.success(xmlhttp.responseText);
								}
							} else {
								if (typeof params.error != "undefined") {
									params.error(xmlhttp.status + xmlhttp.statusText);
								}
								console.error(url + ": " + xmlhttp.status);
							}
						}
					};
				}

				xmlhttp.setRequestHeader("Content-Type", "application/json");
				var param = "";
				for ( var prop in data) {
					param += prop + "=" + data[prop] + "&";
				}
				param = param.substring(0, param.length - 1);
				xmlhttp.send(param);
				if (!async) {

					if (xmlhttp.readyState == 4 && xmlhttp.status == 200)

						if (typeof params.success != "undefined") {
							params.success(xmlhttp.responseText);
						} else {
							if (typeof params.error != "undefined") {
								params.error(xmlhttp.status + xmlhttp.statusText);
							}
							console.error(url + ": " + xmlhttp.status);
						}

				}
			}
		},
		get : function(params) {
			var xmlhttp = this.createXMLHttpRequest();
			if (xmlhttp != null) {
				var async = true;
				if (params.async != undefined)
					async = params.async;
				var url = "";
				if (params.url != undefined)
					url = params.url;
				if (url == null || url.length == 0)
					return;
				if (params.data != null) {
					var data = params.data;
					var paramPrefix = url.indexOf("?") == -1 ? "?" : "&";

					url = url + paramPrefix;
					for ( var prop in data) {
						url += prop + "=" + data[prop] + "&";
					}
					url = url.substring(0, url.length - 1);
				}
				xmlhttp.open("GET", url, async);
				if (async) {
					xmlhttp.onreadystatechange = function() {
						if (this.readyState == 4) {
							if (this.status == 200) {
								if (typeof params.success != "undefined") {
									params.success(xmlhttp.responseText);
								}
							} else {
								if (typeof params.error != "undefined") {
									params.error(xmlhttp.status + xmlhttp.statusText);
								}
								console.error(url + ": " + xmlhttp.status);
							}
						}
					};
				}

				xmlhttp.send(null);
				if (!async) {
					if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
						if (typeof params.success != "undefined") {
							params.success(xmlhttp.responseText);
						} else {
							if (typeof params.error != "undefined") {
								params.error(xmlhttp.status + xmlhttp.statusText);
							}
							console.error(url + ": " + xmlhttp.status);
						}

				}
			}
		},
		createXMLHttpRequest : function() {
			var ajax = null;
			if (window.XMLHttpRequest) {
				ajax = new XMLHttpRequest();
			} else if (window.ActiveXObject) {
				ajax = new ActiveXObject("Microsoft.XMLHTTP");
			}
			return ajax;
		},
		getJSONP : function(params) {

			var url = null;
			if (typeof params.url != "undefined") {
				url = params.url;
			}
			if (url == null) {
				return;
			}

			var ff = "" + new Date().getTime() + (parseInt(Math.random() * 10000000000));
			eval("jsonpCallback_" + ff + "=" + function(data) {

				if (typeof params.success != "undefined") {
					params.success(data);
				}
			});

			//根据url中是否出现过 "?" 来决定添加时间戳参数时使用 "?" 还是 "&" 
			var paramPrefix = url.indexOf("?") == -1 ? "?" : "&";

			url = url + paramPrefix + "jsonpCallback=" + "jsonpCallback_" + ff;
			var param = "";

			if (typeof params.data != "undefined" && params.data != null) {

				var data = params.data;
				for ( var prop in data) {
					param += prop + "=" + data[prop] + "&";
				}
				param = param.substring(0, param.length - 1);
			}
			if (param.length > 0)
				url = url + "&" + param;
			var script = document.createElement("script");
			document.body.appendChild(script);
			script.src = url;
			script.charset = "UTF-8";
			// for firefox, google etc.
			script.onerror = function() {
				if (typeof params.error != "undefined") {
					params.error();
				}

			}
			script.onload = function() {

				document.body.removeChild(script);
			}
			// for ie 
			script.onreadystatechange = function() {
				if (this.readyState == "loaded" || this.readyState == "complete") {
					document.body.removeChild(script);
				}
			}
		}

	};
	function cls() {
		document.getElementById("log").value = "";
	}
	function stop() {
		try {
			myajax.get({
				url : currUrl + "monitoring/log/stop" + suffix,
				data : {
					isStop : document.getElementById("stp").innerHTML == "停止",
					"r" : new Date().getTime()
				},
				error : function(data) {
					document.getElementById("stp").innerHTML = data;
				},
				success : function(data) {
					if (data == "false") {
						document.getElementById("stp").innerHTML = "停止";
					} else {
						document.getElementById("stp").innerHTML = "开始";
					}
				}
			});
		} catch (e) {
		}
	}
	function filter() {
		try {
			myajax.get({
				url : currUrl + "monitoring/log/filter" + suffix,
				error : function(data) {
				},
				data : {
					level : document.getElementById("level").value,
					cls : document.getElementById("cls").value,
					method : document.getElementById("method").value,
					content : document.getElementById("content").value,
					"r" : new Date().getTime()
				},
				success : function(data) {
				}
			});
		} catch (e) {
		}
	}
	document.getElementById("stp").onclick();
	setTimeout('myrefresh()', 1000);
	function myrefresh() {
		try {
			myajax.get({
				url : currUrl + "monitoring/log/getLog" + suffix,
				data : {
					"r" : new Date().getTime()
				},
				error : function(data) {
				},
				success : function(data) {
					if (data && data.length > 0) {
						// 						http://blog.csdn.net/samed/article/details/51142413
						//https://developer.mozilla.org/zh-CN/docs/Web/API/Document/execCommand
						// 						http://wqss.2008.blog.163.com/blog/static/9124280820101139525189/
						var content = document.getElementById('log');
						content.selectionStart = content.value.length;
						content.selectionEnd = content.value.length;
						content.value = content.value + data;
						try {
							content.scrollTop = content.value.length;
						} catch (e) {
						}
					}
					setTimeout('myrefresh()', 1000);
				}
			});
		} catch (e) {
		}
	}
</script>
</html>